{% extends "/layout.html" %}
{% block indexContent %}
<div class="secur_header">
  <div class="wrapper content">
    <div class="title">{{pageRes.lblSafeCenter}}</div>
  </div>
</div>
<div class="wrapper secur_center">
  <div class="et_form resetContainer" >
    <h1>{{pageRes.lblResetPwd}}</h1>
    <h2>{{pageRes.lblResetPwdDes}}</h2>
    <ul>
      <li>
        <label>{{pageRes.lblPwd}}：</label>
        <input class="txtPwd" type="password" value="" />
        <span></span>
      </li>
      <li>
        <label>{{pageRes.lblConfirmPwd}}：</label>
        <input class="txtConfirmPwd" type="password" value="" />
        <span></span>
      </li>
    </ul>
    <div class="bottom">
      <button class="form_button btnSumbit">{{pageRes.btnSumbit}}</button>
      <a href="/index">{{pageRes.linkGoHome}}</a>
    </div>
    <div class="result"></div>
  </div>
</div>

<script type="text/javascript">
  $(function() {
    var utilities = nsbase.utility,
      errorClass = "error";
    bindResetForm();
    // bind reset password from control events

    function bindResetForm() {
      var resetForm = $(".resetContainer"),
        btnSumbit = resetForm.find(".btnSumbit"),
        txtPwd = resetForm.find(".txtPwd"),
        txtConfirmPwd = resetForm.find(".txtConfirmPwd"),
        confirmMsgSpan = txtConfirmPwd.parent().find("span:last");


      // validate password is empty or is match width confirm password 
      $.merge(txtConfirmPwd, txtPwd).blur(function() {
        var sender = $(this),
          pwd = txtPwd.val(),
          confirmPwd = txtConfirmPwd.val(),
          msgSpan = sender.parent().find("span:last");

        inputEmptyValidate([sender]);
        if (!msgSpan.hasClass(errorClass) && pwd.length > 0 && confirmPwd.length > 0) {
          if (pwd !== confirmPwd) {
            confirmMsgSpan.addClass(errorClass).text({{pageRes.msgPwdNotMatch}});//密码不匹配
          } else {
            confirmMsgSpan.removeClass(errorClass).empty();
          }
        }
      });

      btnSumbit.click(function() {
        var resetForm = $(this).parents(".resetContainer"),
          txtPwd = resetForm.find(".txtPwd");

        inputEmptyValidate(resetForm.find("input"));

        if (resetForm.find("." + errorClass).length > 0) {
          return false;
        }

        var param = {
          user_id: "{{user_id}}",
          event_id:"{{event_id}}",
          password: txtPwd.val()
        };
        nsbase.ajax.request(nsbase.config.actionUrl.safe.resetPwd, param, function(result) {
          var resultContainer = registerForm.find(".result").slideDown();
          if (result.success) {
            resultContainer.text({{pageRes.msgPwdResetSuccess}});//恭喜您！密码重设成功，您可以用新的密码登录ET了！^_^
          } else {
            resultContainer.text(result.message);
          }
        });
      });
    }

    // validate input type = 'text' is empty or not
    function inputEmptyValidate(inputs) {
      $.each(inputs, function(i, item) {
        var $item = $(item);
        var labelDesc = utilities.trimEnd($item.prev().text(), '：'),
          msgSpan = $item.parent().find("span:last");
        msgSpan.removeClass(errorClass).empty();

        if (!utilities.trim($item.val())) {
          msgSpan.addClass(errorClass).text(utilities.stringFormat({{pageRes.msgNotEmpty}}, labelDesc));
        }
      });
    }
  });
</script>
{% endblock %}